<template>
  <view>
    <view class="u-page">
      <view class="searchBox mL15 mR15 bgf">
        <u-search
          placeholder="搜索职位/公司"
          v-model="query.oddJobName"
          height="80"
          :show-action="false"
          bg-color="#fff"
          shape="square"
          @search="search"
          @change="searchChange"
        >
        </u-search>
      </view>
      <view v-show="query.oddJobName == ''">
        <view class="mT20 pL15 pR15" v-show="searchHistoryList.length">
          <view class="flex jst-between alg-center">
            <text class="font14">搜索历史</text>
            <image
              @click="deleteHistory"
              class="imgW32"
              :src="resources.deleteIcon"
              mode=""
            ></image>
          </view>
          <view class="hot-search-list">
            <view
              v-for="(item, index) in searchHistoryList"
              :key="index"
              class="hot-search-item"
              @click="searchHot(item)"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
        <view class="mT20 pL15 pR15" v-if="query.oddJobName == ''">
          <view class="font14">热门搜索</view>
          <view class="hot-search-list">
            <view
              v-for="(item, index) in hotSearchList"
              :key="index"
              class="hot-search-item"
              @click="searchHot(item)"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
      </view>
      <view v-show="query.oddJobName">
        <view class="flex jst-between mL15 mR15 relative mB10 mT15">
          <view
            class="flex alg-center font14"
            :class="query.oddJobType.length > 0 ? 'u-blue' : 'u-3'"
            @click="openJobType"
          >
            <text class="mR10">全部职位</text>
            <u-icon
              size="20"
              name="arrow-down-fill"
              :color="query.oddJobType.length > 0 ? '#3291F8' : '#666'"
            ></u-icon>
          </view>
          <view class="flex alg-center">
            <view class="flex alg-center" @click="openJobSort">
              <text
                class="mR10"
                :class="query.sort.length > 0 ? 'u-blue' : 'u-3'"
                >排序</text
              >
              <u-icon
                size="20"
                name="arrow-down-fill"
                :color="query.sort.length > 0 ? '#3291F8' : '#666'"
              ></u-icon>
            </view>
            <view class="flex alg-center mL20" @click="openJobSel">
              <text class="mR10" :class="selColor ? 'u-blue' : 'u-3'"
                >筛选</text
              >
              <u-icon
                size="20"
                name="arrow-down-fill"
                :color="selColor ? '#3291F8' : '#666'"
              ></u-icon>
            </view>
          </view>
        </view>
        <view class="flex flex-wrap relative mB10 mL15 mR15 pB15">
          <view
            class="jobTag"
            :class="item.checked ? 'checked' : ''"
            @click="changeTab(item, i)"
            v-for="(item, i) in tagLis"
            :key="item.value"
          >
            {{ item.text }}
          </view>
        </view>
        <mescroll-uni
          class="lisBox tabBarLisBox"
          ref="mescrollRef"
          @init="mescrollInit"
          @down="downCallback"
          @up="upCallback"
          :down="downOption"
          :up="upOption"
          :bottombar="false"
          :top="260"
          :wxSelfTabbar="true"
        >
          <view>
            <!-- #ifdef MP-USER -->
            <userJobItem :list="list"></userJobItem>
            <!-- #endif -->
            <!-- #ifdef MP-COMPANY -->
            <comJobItem :list="list"></comJobItem>
            <!-- #endif -->
          </view>
        </mescroll-uni>
      </view>

      <!-- <scroll-view  id="scroll-view-h" :refresher-enabled="false"
				:refresher-threshold="50" :scroll-with-animation='true' @scrolltolower="handleScrollToLower"
				:scroll-y="true">
				<jobItem></jobItem>
				<u-loading class="loading" mode="circle" size="44" v-if="loading" />
			</scroll-view> -->
      <jobType ref="jobType" @getSelV="getSelV"></jobType>
      <jobSel ref="jobSel" @checkSel="checkSel"></jobSel>
      <jobSort ref="jobSort" @updateSelV="changeValue"></jobSort>
    </view>
  </view>
</template>

<script>
import userJobItem from "@/components/job/jobCard/index.vue";
import comJobItem from "@/components/company/jobItem/index.vue";
import jobType from "@/components/job/jobType/index.vue";
import jobSel from "@/components/job/jobSel/index.vue";
import jobSort from "@/components/job/jobSort/index.vue";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

import { getLocal } from "@/libs/map.js";
import { homeJobLis } from "@/api/userInterface/job.js";
export default {
  mixins: [MescrollMixin],
  components: {
    userJobItem,
    comJobItem,
    jobType,
    jobSel,
    jobSort,
  },
  data() {
    return {
      hotSearchList: [
        { name: "服务员" },
        { name: "小时工" },
        { name: "销售" },
        { name: "销售经理" },
        { name: "文员" },
        { name: "客服" },
        { name: "行政" },
        { name: "电商运营" },
      ],
      searchHistoryList: [],
      downOption: {
        use: true,
        auto: false,
      },
      query: {
        longitude: null,
        latitude: null,
        oddJobName: "",
        sort: "",
        oddReleaseType: "",
        staSalary: "",
        endSalary: "",
        staJobNum: "",
        endJobNum: "",
        salaryPayment: "",
        izTools: "",
        workWay: "",
        oddJobType: "",
        oftenFilter: [],
        pageSize: 10,
        pageNo: 1,
      },
      selColor: false,
      upOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        empty: {
          use: true,
          icon: "/static/image/nodata.png",
          tip: "暂无数据",
          fixed: true,
        },
        textNoMore: "到底啦~",
      },
      list: [],
      tagLis: [],
    };
  },
  async onReady() {
    const { lat, lon } = await this.xf.getLatOrLon();
    this.query.latitude = lat;
    this.query.longitude = lon;
  },
  onShow(e) {
    this.getFastNav();
  },
  onLoad() {
    this.loadHotSearchList();
    // this.startCacheClearInterval();
  },
  methods: {
    changeTab(item, i) {
      this.tagLis[i].checked = !this.tagLis[i].checked;
      if (this.tagLis[i].checked) {
        this.query.oftenFilter.push(item.value);
      } else {
        this.query.oftenFilter = this.query.oftenFilter.filter(
          (v) => v != item.value
        );
      }
      this.list = [];
      this.markers = [];
      this.mescroll.resetUpScroll();
    },
    //打开全部职位选择框
    openJobType() {
      this.$refs.jobType.openPoup();
    },
    search(value) {
      if (value) {
        this.list = [];
        this.mescroll.resetUpScroll();
        this.recordSearch(value);
      }
    },
    deleteHistory() {
      this.searchHistoryList = [];
      uni.setStorageSync("searchHistoryList", []);
    },
    searchChange(value) {
      if (value == "") {
        this.list = [];
      }
    },
    // 获取搜索历史缓存记录
    recordSearch(value) {
      let searchList = uni.getStorageSync("searchHistoryList") || [];
      searchList = searchList.filter((item) => item.name !== value);
      // 添加新记录到列表头部
      searchList.unshift({ name: value });
      // 确保最多只保留十个搜索数据
      if (searchList.length > 10) {
        searchList.pop();
      }
      // 更新本地缓存
      uni.setStorageSync("searchHistoryList", searchList);

      // 更新搜索历史列表
      this.loadHotSearchList();
    },

    loadHotSearchList() {
      this.searchHistoryList = uni.getStorageSync("searchHistoryList") || [];
    },
    searchHot(item) {
      this.query.oddJobName = item.name;
      this.search(item.name);
    },
    //打开筛选弹窗
    openJobSel() {
      this.$refs.jobSel.openPoup();
    },
    //打开排序弹窗
    openJobSort() {
      this.$refs.jobSort.openPoup();
    },
    //获取顶部tag
    getFastNav() {
      this.baseStore
        .getDictionaryDataAll("jjp_oddjob_fast_search")
        .then((res) => {
          this.tagLis = res.map((v) => {
            return { ...v, checked: false };
          });
        });
    },
    changeValue(v) {
      this.query[v.type] = v.value;
      this.list = [];
      this.mescroll.resetUpScroll();
    },
    getSelV(v) {
      this.query.oddJobType = v;
      this.list = [];
      this.mescroll.resetUpScroll();
    },
    checkSel(v) {
      this.query = {
        ...this.query,
        ...v,
      };
      this.list = [];
      this.mescroll.resetUpScroll();
      for (let k in v) {
        if (v[k]) {
          this.selColor = true;
          return;
        } else {
          this.selColor = false;
        }
      }
    },
    async upCallback(page) {
      if (page.num == 1) this.list = [];
      this.query.pageNo = page.num;
      homeJobLis(this.query)
        .then((res) => {
          let list = res.result.records;
          this.list = this.list.concat(list);
          this.mescroll.endSuccess(res.result.records.length);
        })
        .catch((err) => {
          this.mescroll.endByPage(0, 0);
          this.mescroll.endErr();
        });
    },
  },
};
</script>
<style lang="scss">
page {
  /* #ifdef MP-WEIXIN */
  height: 100%;
  /* #endif */
  background: linear-gradient(0deg, #f7f8fb, #e1eeff);
}
</style>
<style scoped lang="scss">
page {
  height: 100%;
  background: linear-gradient(0deg, #f7f8fb, #e1eeff);
}

.hot-search-list {
  margin-top: 23rpx;
  display: flex;
  flex-flow: wrap;
}

.hot-search-item {
  height: 54rpx;
  min-width: 120rpx;
  padding: 0 30rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  margin-right: 30rpx;
  margin-top: 20rpx;
}

.bgImg {
  position: absolute;
  height: 400rpx;
  width: 100%;
  z-index: 0;
}

.searchBox {
  position: relative;
  z-index: 1;
  border-radius: 10rpx;
}

.jobMoney {
  color: #eb392f;
}

.jobTag {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #8d8d8d;
  width: 152rpx;
  height: 54rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin-right: 27rpx;
  line-height: 54rpx;
  text-align: center;
  border: 2rpx solid #fff;
  &:last-child {
    margin-right: 0;
  }

  &.checked {
    color: #3291f8;
    border: 2rpx solid #3291f8;
  }
}
</style>
